import Qt 4.7

Item {
    id: root
    property alias iconSource: iconImg.source
    property alias nameText: iconName.text
    property alias textColor: iconName.color
    property int shadowOffset: 2
    property alias shadowColor: iconNameShadow.color

    property int animationState: 0
    width: 80; height: 100

    signal clicked
    signal pressed
    signal released
    /*Image {
        id: iconImgShadow
        width: 80; height: 80
        x: iconImg.x+3;y:iconImg.y+3
        source: iconImg.source
        opacity: 0.3
    }*/
    Image {
        id: iconImg
        width: 80; height: 80
        Behavior on width { NumberAnimation {} }
        Behavior on height { NumberAnimation {} }
        onWidthChanged: {
            if(animationState == 1)
            {
                if(width >= 90)
                {
                    animationState = -1;
                    width = 80;
                    height = 80;
                }
            }
            else if(animationState == -1)
            {
                if(width <= 80)
                {
                    animationState = 0;
                    root.clicked();
                }
            }
        }
    }
    Rectangle {
        id: iconNameBG
        //color: "white"
        //opacity: 0.5
        anchors.top: iconImg.bottom
        anchors.bottom: parent.bottom
        anchors.left: iconImg.left
        anchors.right: iconImg.right
        height: 20
        visible: false
    }
    Text {
        id: iconNameShadow
        anchors.fill: iconNameBG
        anchors.topMargin: shadowOffset
        anchors.leftMargin: shadowOffset
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        text: iconName.text
        //font.bold: true
        opacity: 0.5
        font.pixelSize: 18
        //visible: false
    }
    Text {
        id: iconName
        anchors.fill: iconNameBG
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        //font.bold: true
        font.pixelSize: 18
    }

    function startAnimation() {
        animationState = 1;
        iconImg.width = 90;
        iconImg.height = 90;
    }
    MouseArea {
        anchors.fill: parent
        onPressed: root.pressed();
        onReleased: root.released();
        onClicked: {
            startAnimation();
        }
    }//MouseArea
}
